import { CaseConfigType } from '@shared';
import { SimpleComponent } from './simple/simple.component';
import { BasicComponent } from './basic/basic.component';
import { ActionsComponent } from './actions/actions.component';
import { ExpandComponent } from './expand/expand.component';
import { VirtualScrollComponent } from './virtual-scroll/virtual-scroll.component';
import { ClickComponent } from './click/click.component';
import { SelectedComponent } from './selected/selected.component';

export const ListConfig: CaseConfigType = {
  location: 'List',
  description: `展示相同类型简单对象的容器。`,
  description_en: `Container for displaying simple objects of the same type.`,
  component: [
    {
      demo: SimpleComponent,
      codePath: 'showcase/list/simple/simple.component',
      demoTitle: '简单用法',
      demoTitle_en: 'Simple usage',
      demoDescription: `最简单的用法，多数用于展示数据较少、较简单的场景。`,
      demoDescription_en: `The simplest usage, mostly used to display simpler scenarios with less data.`,
    },
    {
      demo: BasicComponent,
      codePath: 'showcase/list/basic/basic.component',
      demoTitle: '基础列表',
      demoTitle_en: 'Basic List',
      demoDescription: `承载的内容需要灵活的排版。`,
      demoDescription_en: `The content carried requires flexible layout.`,
    },
    {
      demo: ActionsComponent,
      codePath: 'showcase/list/actions/actions.component',
      demoTitle: '带操作项',
      demoTitle_en: 'Actions List',
      demoDescription: `内容中包含一些可操作的按钮等。`,
      demoDescription_en: `The content contains some actionable buttons, etc.`,
    },
    {
      demo: ExpandComponent,
      codePath: 'showcase/list/expand/expand.component',
      demoTitle: '可折叠展开的列',
      demoTitle_en: 'Expand List',
      demoDescription: `对于信息过多的列，可以通过使用折叠的列隐藏次要信息。`,
      demoDescription_en: `For columns with too much information, you can hide secondary information by using collapsed columns.`,
    },
    {
      demo: VirtualScrollComponent,
      codePath: 'showcase/list/virtual-scroll/virtual-scroll.component',
      demoTitle: '虚拟滚动',
      demoTitle_en: 'VirtualScroll List',
      demoDescription: `结合 cdk-virtual-scroll 实现虚拟滚动，能够提高数据量大时候长列表的性能。同时可以使用其 scrolledIndexChange 等方法实现滚动加载数据。`,
      demoDescription_en: `Combined with cdk-virtual-scroll to implement virtual scrolling, it can improve the performance of long lists when the amount of data is large. At the same time, you can use its scrolledIndexChange and other methods to implement scrolling loading of data.`,
    },
    {
      demo: ClickComponent,
      codePath: 'showcase/list/click/click.component',
      demoTitle: '点击事件',
      demoTitle_en: 'Click event',
      demoDescription: `点击事件。`,
      demoDescription_en: `Click event.`,
    },
    {
      demo: SelectedComponent,
      codePath: 'showcase/list/selected/selected.component',
      demoTitle: '列的选中',
      demoTitle_en: 'Selected',
      demoDescription: `可以结合 list-item 的点击事件实现列的选中等功能。`,
      demoDescription_en: `You can combine the click event of list-item to realize column selection and other functions.`,
    },
  ],
  mApi: [
    {
      selector: 'lv-list',
      snippet: ``,
      name: 'lv-list',
      name_en: 'lv-list',
      api: [
        {
          attribute: 'lvSplit',
          type: 'boolean',
          default: 'true',
          description: '是否显示分割线',
          description_en: '',
        },
        {
          attribute: 'lvItemLayout',
          type: 'LvListItemLayout',
          default: 'horizontal',
          description: '设置 lv-list-item 布局, 设置成 vertical 则竖直样式显示, 默认横排 horizontal 【暂只支持横排】',
          description_en: '',
        },
        { attribute: 'lvHoverable', type: 'boolean', default: 'false', description: '是否有hover样式', description_en: '' },
      ],
    },
    {
      selector: 'lv-list-item',
      snippet: ``,
      name: 'lv-list-item',
      name_en: 'lv-list-item',
      api: [
        {
          attribute: 'lvActions',
          type: `TemplateRef[]`,
          default: '--',
          description: '列表项下方内容（列表操作组）',
          description_en: '',
        },
        {
          attribute: 'lvExtra',
          type: 'TemplateRef',
          default: '--',
          description: '列表最右侧内容，额外内容',
          description_en: '',
        },
        { attribute: 'lvExpand', type: 'boolean', default: '--', description: '是否展开', description_en: '' },
        {
          attribute: 'lvExpandIcon',
          type: `string | TemplateRef<any>`,
          default: 'lv-icon-triangle-down',
          description: '展开折叠图标',
          description_en: '',
        },
        { attribute: 'lvExpandRender', type: `TemplateRef<void>`, default: '--', description: '展开的内容', description_en: '' },
      ],
      event: [{ event: 'lvExpandChange', parameter: 'EventEmitter<boolean>', description: '列展开回调', description_en: '' }],
    },
    {
      selector: 'lv-list-item-meta',
      snippet: ``,
      name: 'lv-list-item',
      name_en: 'lv-list-item',
      api: [
        {
          attribute: 'lvAvatar',
          type: 'string | TemplateRef',
          default: '--',
          description: '列表元素的图标',
          description_en: '',
        },
        {
          attribute: 'lvTitle',
          type: 'string | TemplateRef',
          default: '--',
          description: '列表元素标题',
          description_en: '',
        },
        {
          attribute: 'lvDescription',
          type: 'string | TemplateRef',
          default: '--',
          description: '列表元素描述内容',
          description_en: '',
        },
      ],
    },
  ],
};
